<template>
  <view class="apply_easypay_success">
    <scroll-view :scroll-y="true" :style="{height: (safeHeight - safeWidth / 375 * 64) + 'px'}">
      <view class="main">
        <view class="top">
          <image :src="$store.state.imgBaseUrl + '/qrcode/result/success.png'" mode="" class="img"></image>
          <view class="title">
            信息审核通过-还差一步
          </view>
          <view class="tip">
            <view class="">
              请输入易生支付所发送的验证码，此验证仅作为易生支付与商户签署《特约商户（三方）受理支付业务协议》验证使用。
            </view>   
          </view>
        </view>
        <view class="inpt-wrap">
          <input type="number" value="" v-model="checkCode" placeholder="请输入验证码"/>
          <button type="primary" class="btn" v-if="!timer" @click="sendMessage">我要签约</button>
          <view class="countDown" v-else>
            重发{{count}}s
          </view>
        </view>
        <view class="agree">
          <radio :value="isCheck" :checked="isCheck == '1'" @tap="isAgree" class="agree-radio" color="#C2AC78"/>
          <text class="agree-text-1">阅读并同意<text class="agree-text-2" @click="checkPreview">《易生三方协议内容》</text></text>
        </view>
        <!--<view class="agree">
          <radio :value="isCheck" :checked="isCheck == '1'" @tap="isAgree" class="agree-radio" color="#C2AC78"/>
          <text class="agree-text-1">阅读并同意<text class="agree-text-2" @click="testCheck">《易生三方协议内容》</text></text>
        </view> -->
        
        <view class="tip-wrap" v-if="mobile">
          <view class="tip-1">
            验证码将发送至&nbsp;&nbsp;&nbsp;&nbsp;<text class="phone-text">{{mobile}}</text>，请注意查收
          </view>
          <view class="tip-2">
            如未收到请拨打客服电话400-065-8899
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <button type="primary" class="btn" @click="submitInfo">提交申请</button>
    </view>
    <!-- <block v-if="previewFlag">
    <web-view :src="allUrl" v-if="allUrl"></web-view>
    </block> -->
  </view>
</template>

<script>
import { submitToCreateContractApi, sendMessageApi, getEasyPayInfoApi, previewContrac } from '@/service/qrCode/qrCode.service.js'
import { exportFile } from '@/unit/common.js'
import { setSafeAreaSize } from '@/mixin/index.mixin.js'
export default {
  mixins: [setSafeAreaSize],
  data () {
    return {
      mobile: '',
      timer: null,
      count: 0,
      hasSendMsg: false,
      checkCode: '',
      isCheck: '0',
      allUrl: '',
      currentPageIsUpload: false // 当前页面是否需要刷新
    }
  },
  // onShow () {
  //   if (this.currentPageIsUpload) {
  //     this.currentPageIsUpload = false;
  //   } else {
  //     console.log('false');
  //   }
  // },
  mounted() {
    this.getEasyPayInfo();
  },
  methods: {
    checkPreview () {
      // uni.navigateTo({
      //   url: '/pages/qrCode/applyEasypay/previewPdf'
      // })
      uni.navigateTo({
        url: '/pages/qrCode/applyEasypay/pdfH5'
      })
      // previewContrac({}, res => {
      //   // alert(JSON.parse(res))
      //   let binaryData = [];
      //   binaryData.push(res);
      //   let url = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"}));
      //   // window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(url), '_self');
      //   // window.open('/static/pdf/web/viewer.html?file=' + '/static/pdf/web/compressed.tracemonkey-pldi-09.pdf', '_self');
      //   // this.previewFlag = true;
      //   this.allUrl = '/static/pdf/web/viewer.html?file=' + encodeURIComponent(url);
      // })
    },
    isAgree () {
      this.isCheck = this.isCheck == '0' ? '1' : '0'
    },
    submitInfo () {
      submitToCreateContractApi({
        checkCode: this.checkCode,
        type: 1
      }, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交申请成功！',
            success: () => {
              setTimeout(function() {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 1500)
            }
          })
        }
      }, null, {showErrorMsg: true});
    },
    getEasyPayInfo () {
      getEasyPayInfoApi({}, res => {
        if (res.status == 0) {
          this.mobile = res.data.mobile;
        }
      }, null, {showErrorMsg: true});
    },
    sendMessage () { // 发送信息
      if (this.isCheck != '1') {
        uni.showToast({
          title: '请先同意易生三方协议内容!',
          icon: 'none'
        })
        return false 
      }
      sendMessageApi({}, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '发送成功！',
            icon: 'none'
          });
          this.hasSendMsg = true;
          this.countDown();
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        };
      }) 
    },
    countDown () { // 倒计时
      const TIME_COUNT = 300;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .agree {
    margin: 88rpx 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    font-size: 24rpx;
    .agree-radio {
      .uni-radio-input {
        width: 100%;
        height: 100%;
      }
    }
    .agree-text-1 {
      margin-left: 22rpx;
      color: #999999;
    }
    .agree-text-2 {
      color: #C2AC78;
    }
  }
  .apply_easypay_success {
    position: relative;
    min-height: 100vh;
    background-color: #FFFFFF;
    .dot {
      width: 10rpx;
      height: 10rpx;
      border-radius:50%;
      margin-top: 10rpx;
    }
    .main {
      padding: 0 32rpx 30rpx;
      .top {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        .img {
          margin-top: 72rpx;
          width: 306rpx;
          height: 306rpx;
        }
        .title {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 500;
          margin-top: 22rpx;
          color: #333333;
        }
        .tip {
          margin-top: 38rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
          line-height: 50rpx;
        }
      }
      .inpt-wrap {
        margin-top: 110rpx;
        display: flex;
        justify-content: center;
        input {
          padding: 0 20rpx;
          background-color: #E1E1E1;
          flex: 1;
          border-radius: 10rpx;
          height: 80rpx;
          border-radius: 10rpx;
        }
        .btn {
          margin-left: 20rpx;
          width: 224rpx;
          height: 80rpx;
          background: #434343;
          border-radius:5px;
          color: #F6DA99;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
        }
        .countDown {
          text-align: center;
          margin-left: 20rpx;
          width: 224rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #E1E1E1;
          border-radius:5px;
          color: #434343;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
        }
      }
      .tip-wrap {
        margin-top: 26rpx;
        text-align: right;
        line-height: 1.8;
        .tip-1 {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          .phone-text {
            margin-left: 10rpx;
            color: #1F8EDD;
          }
        }
        .tip-2 {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }
      
    }
    
    .footer {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      height: 114rpx;
      border-top: 2rpx solid #E1E1E1;
      width: 100%;
      background-color: #FFFFFF;
      .btn {
        width: 688rpx;
        height: 80rpx;
        background: #434343;
        border-radius: 10rpx;
        color: #F6DA99;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }
</style>
